<template>
  <!-- 使用SVG文件图标 -->
  <img 
    v-if="isSvgFile"
    :src="svgSrc"
    :class="iconClass"
    :width="size"
    :height="size"
    :alt="name"
  />
  <!-- 使用内联SVG图标 -->
  <svg 
    v-else
    :class="iconClass"
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <!-- 星星图标 -->
    <template v-if="name === 'star'">
      <path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </template>
    
    <!-- 聊天图标 -->
    <template v-else-if="name === 'chat'">
      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
    </template>
    
    <!-- 用户加号图标 -->
    <template v-else-if="name === 'user-plus'">
      <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
      <circle cx="8.5" cy="7" r="4"/>
      <line x1="20" y1="8" x2="20" y2="14"/>
      <line x1="23" y1="11" x2="17" y2="11"/>
    </template>
    
    <!-- 铃铛图标 -->
    <template v-else-if="name === 'bell'">
      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
    </template>
    
    <!-- 帮助圆圈图标 -->
    <template v-else-if="name === 'help-circle'">
      <circle cx="12" cy="12" r="10"/>
      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
      <line x1="12" y1="17" x2="12.01" y2="17"/>
    </template>
    
    <!-- 太阳图标 -->
    <template v-else-if="name === 'sun'">
      <circle cx="12" cy="12" r="5"/>
      <line x1="12" y1="1" x2="12" y2="3"/>
      <line x1="12" y1="21" x2="12" y2="23"/>
      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
      <line x1="1" y1="12" x2="3" y2="12"/>
      <line x1="21" y1="12" x2="23" y2="12"/>
      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
    </template>
    
    <!-- 月亮图标 -->
    <template v-else-if="name === 'moon'">
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
    </template>
    
    <!-- 刷新图标 -->
    <template v-else-if="name === 'refresh-cw'">
      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
      <path d="M21 3v5h-5"/>
      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
      <path d="M3 21v-5h5"/>
    </template>
    
    <!-- 下箭头图标 -->
    <template v-else-if="name === 'chevron-down'">
      <path d="m6 9 6 6 6-6"/>
    </template>
    
    <!-- 趋势上升图标 -->
    <template v-else-if="name === 'trending-up'">
      <path d="m22 7-8.5 8.5-5-5L2 17"/>
      <path d="M16 7h6v6"/>
    </template>
    
    <!-- 闪电图标 -->
    <template v-else-if="name === 'zap'">
      <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
    </template>
    
    <!-- 烧瓶图标 -->
    <template v-else-if="name === 'flask'">
      <path d="M9 2v6l-2 2v8a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-8l-2-2V2"/>
      <path d="M9 2h6"/>
    </template>
    
    <!-- 叶子图标 -->
    <template v-else-if="name === 'leaf'">
      <path d="M11 20A7 7 0 0 0 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10.5 10Z"/>
      <path d="M2 21c0-3 1.85-5.36 5.08-6"/>
    </template>
    
    <!-- 水滴图标 -->
    <template v-else-if="name === 'droplet'">
      <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/>
    </template>
    
    <!-- 锤子图标 -->
    <template v-else-if="name === 'hammer'">
      <path d="M15 12l-8.5 8.5c-.83.83-2.17.83-3 0 0 0 0 0 0 0-.83-.83-.83-2.17 0-3L12 9"/>
      <path d="M17.64 15L22 10.64"/>
      <path d="M20.91 11.7l-1.25-1.25"/>
    </template>
    
    <!-- 菜单图标 -->
    <template v-else-if="name === 'menu'">
      <line x1="3" y1="6" x2="21" y2="6"/>
      <line x1="3" y1="12" x2="21" y2="12"/>
      <line x1="3" y1="18" x2="21" y2="18"/>
    </template>
    
    <!-- X关闭图标 -->
    <template v-else-if="name === 'x'">
      <line x1="18" y1="6" x2="6" y2="18"/>
      <line x1="6" y1="6" x2="18" y2="18"/>
    </template>
    
    <!-- 默认图标（问号） -->
    <template v-else>
      <circle cx="12" cy="12" r="10"/>
      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
      <line x1="12" y1="17" x2="12.01" y2="17"/>
    </template>
  </svg>
</template>

<script setup lang="ts">
// Props
interface Props {
  name: string
  size?: number | string
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  size: 24,
  class: ''
})

// SVG文件映射
const svgFileMap: Record<string, string> = {
  'stock-index': '/assets/images/icons/sector/stock-index.svg',
  'noble-metal': '/assets/images/icons/sector/noble-metal.svg',
  'chemical': '/assets/images/icons/sector/chemical.svg',
  'agricultural': '/assets/images/icons/sector/agricultural.svg',
  'oil': '/assets/images/icons/sector/oil.svg',
  'ferrous': '/assets/images/icons/sector/ferrous.svg'
}

// 判断是否为SVG文件图标
const isSvgFile = computed(() => {
  return svgFileMap.hasOwnProperty(props.name)
})

// 获取SVG文件路径
const svgSrc = computed(() => {
  return svgFileMap[props.name] || ''
})

// 计算图标类名
const iconClass = computed(() => {
  return props.class || ''
})
</script>
